<template>
  <a-row>
   <!-- 左边列 -->
   <a-col :span="6">
    <!-- 页面标题区 -->
    <a-row  class="page-content-header">
      <span class="title">{{routeName}}&nbsp;&nbsp;&nbsp;<plus-outlined @click="showAddModal"/></span>
    </a-row>
    <!-- 页面内容区 -->
    <a-row>
      <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="treeData"
        style="font-size: 18px;margin-left: 30px;" @select="getTableData">
      </a-tree>
    </a-row>
   </a-col>

   <!-- 右边列 -->
   <a-col :span="18">
    <a-row style="margin: 3% 0px 1% 0px;">
      <a-button type="primary" size="large" @click="">功能导出</a-button>
      &emsp;&emsp;
      <a-button size="large" @click="showModal">功能导入</a-button>
    </a-row>

    <a-row>
    <!-- 表格 -->
    <a-table :columns="columns" :data-source="data" :scroll="{ x: 800 }">
      <!-- 主体部分 -->
      <template #bodyCell="{ column, record }" style="color: black;">
        <template v-if="column.key === 'funID'">
          <a style="color: black;">{{ record.id }}</a>
        </template>
        <template v-else-if="column.key === 'funName'">
          <a style="color: black;">{{ record.name }}</a>
        </template>
        <template v-else-if="column.key === 'visiable'">
          <a style="color: black;">{{ record.visiable }}</a>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a @click="add(record)">新增</a>
            <a-divider type="vertical" />
            <a @click="update(record)">编辑</a>
            <a-divider type="vertical" />
            <a style="color: red;">删除</a>
          </span>
        </template>
      </template>

    </a-table>
    </a-row>
   </a-col>
  </a-row>



  <a-modal width="600px" v-model:visible="visible" centered="true" title="功能导入" footer="" @ok="handleOk">
    <a-row style="margin-bottom: 60px;margin-top: 30px;">
      <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">步骤:&nbsp;&nbsp;</a-col>
    <a-col :span="18"  style="font-weight: bold;font-size: 16px;">
      ①下载模板 → ②填写数据 → ③上传
    </a-col>
    </a-row>
    <a-row style="margin-bottom: 60px;">
      <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">模板:&nbsp;&nbsp;</a-col>
      <a-col :span="18"  style="font-weight: bold;font-size: 16px;">
        <a-button  style="font-weight: bold;font-size: 15px;margin-bottom:3px" @click="downFile">下载模板</a-button>
      </a-col>
    </a-row>
    <a-row style="margin-bottom: 30px;">
      <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">文件:&nbsp;&nbsp;</a-col>
        <a-col :span="18"  style="font-weight: bold;font-size: 16px;">
          <a-upload v-model:file-list="fileList" list-type="picture-card" accept="file" :show-upload-list="false"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @click="handleUpload">
              <div style="font-weight: bold;font-size: 16px;">
                点击上传
              </div>
          </a-upload>
        </a-col>
    </a-row>
  </a-modal>

  <a-modal width="500px" v-model:visible="addVisible" centered="true" title="新增功能" :footer="null">
    <a-form style="padding: 0 10%;" :model="funAddForm" name="function_add" autocomplete="true" @finish="add_function">
      <a-form-item label="功能编号" name="code"  has-feedback :rules="[{ required: true, message: '请输入功能编号' }]" class="form-item-style">
        <a-input  placeholder="请输入功能编号" size="middle" v-model:value="funAddForm.code"></a-input>
      </a-form-item>
      <a-form-item label="功能名称" name="name"  has-feedback :rules="[{ required: true, message: '请输入功能名称' }]" class="form-item-style">
        <a-input  placeholder="请输入功能名称" size="middle" v-model:value="funAddForm.name"></a-input>
      </a-form-item>
      <a-form-item label="是否可见" name="visiable" class="form-item-style">
        <a-radio-group v-model:value="funAddForm.visiable" :options="isVisiable" />
      </a-form-item>

      <a-form-item style="margin:55px auto 0 60%;">
        <a-button key="back" @click="addHandleCancel">返回</a-button>
          <span>&emsp;</span>
        <a-button key="submit" type="primary" html-type="submit">确定</a-button>
      </a-form-item>
    </a-form>
  </a-modal>

  <a-modal width="500px" v-model:visible="updateVisible" centered="true" title="编辑功能" :footer="null">
    <a-form style="padding: 0 10%;" :model="funUpdateForm" name="function_add" autocomplete="true" @finish="update_function">
      <a-form-item label="功能编号" name="id" class="form-item-style">
        <a-input  placeholder="请输入功能编号" size="middle" v-model:value="funUpdateForm.id"></a-input>
      </a-form-item>
      <a-form-item label="功能名称" name="name" class="form-item-style">
        <a-input  placeholder="请输入功能名称" size="middle" v-model:value="funUpdateForm.name"></a-input>
      </a-form-item>
      <a-form-item label="是否可见" name="visiable" class="form-item-style">
        <a-radio-group v-model:value="funUpdateForm.visiable" :options="isVisiable" />
      </a-form-item>

      <a-form-item style="margin:55px auto 0 60%;">
        <a-button key="back" @click="updateHandleCancel">返回</a-button>
          <span>&emsp;</span>
        <a-button key="submit" type="primary" html-type="submit">确定</a-button>
      </a-form-item>
    </a-form>
  </a-modal>

</template>

<script setup>
import { computed,ref,reactive  } from 'vue';
import { useRoute } from 'vue-router';
import { PlusOutlined } from "@ant-design/icons-vue";
import { getFile } from '@/api/index'

//标题
const route = useRoute();
const routeName = computed(() => route.meta.title);

//树参数初始化
const expandedKeys = ref([]);
const selectedKeys = ref([]);
const treeData = ref([
  {title: '销售管理平台',key: '0-0',selectable:true,
    children: [
      {title: 'Web端应用',key: '0-0-0',disabled: true},
      {title: '客户端',key: '0-0-1',},
    ],
  },
  {title: '群利多',key: '2-0',
    children: [
      {title: 'Web端应用',key: '2-0-0'},
      {title: '客户端',key: '2-0-1',},
    ],
  },
  {title: 'AI称管理平台', key: '3-0',
    children: [
      {title: 'Web端应用',key: '3-0-0'},
      {title: '客户端',key: '3-0-1',
        children: [
          { title: 'Web端应用1', key: '0-0-0-0', disableCheckbox: true },
          { title: 'Web端应用2', key: '0-0-0-1' },
        ]},
    ]},
]);
//选择树节点获取表格数据
const getTableData = (selectedKeys) => {
  let selectedKey = selectedKeys[0];
  console.log(selectedKey)
}


//对话框参数声明
const visible = ref(false);
//初始化表单
const funAddForm = reactive({})
//打开对话框
const showModal = () => {
  visible.value = true;
};
//手动取消
const handleCancel = () => {
  visible.value = false;
};



//+号对话框参数声明
const addVisible = ref(false);
//+号对话框“是否可见”选项
const isVisiable = ['可见', '不可见']
//打开+号对话框
const showAddModal = () => {
  addVisible.value = true;
};
//手动取消
const addHandleCancel = () => {
  addVisible.value = false;
};
//添加功能
const add_function = values => {
  console.log(values);
  addVisible.value = false;
}

//表格列数据
const columns = [
  {title: '功能编号',dataIndex: 'funID',key: 'funID',width: '30%'},
  {title: '功能名称',dataIndex: 'funName',key: 'funName',width: '15%'},
  {title: '是否可见',dataIndex: 'visiable',key: 'visiable',width: '15%'},
  {title: '操作',dataIndex: 'action',key: 'action',width: '40%'}];
//表格源数据
const data = [
  {key: '1',id: 10010,name: '张三',visiable:'可见',children: [
    { key: 11, id: 10011, name: '张三丰', visiable: '不可见' },
    { key: 11, id: 10012, name: '张设计', visiable: '不可见' },
  ]},
  {key: '2',id: 10096,name: '李四',visiable:'可见',children: [
    { key: 11, id: 10097, name: '李思源', visiable: '不可见' },
    { key: 11, id: 10098, name: '李四西', visiable: '不可见' },
  ]},
  {key: '3',id: 10086,name: 'Joe Black',visiable:'可见'},
];

 //下载模板
const downFile = () => {
  getFile();
}
//添加数据
const add = record => {
  console.log(record)
}
//删除数据
const delect = record => {
  console.log(record)
}


//修改数据对话框参数声明
const updateVisible = ref(false);
const funUpdateForm = reactive({});
//修改功能
const update_function = values => {
  console.log(values);
  updateVisible.value = false;
}
const updateHandleCancel = () => {
  updateVisible.value = false;
}
//修改数据
const update = record => {
  updateVisible.value = true;
  console.log("record",record)
  Object.assign(funUpdateForm, record)
  console.log("funform", funUpdateForm)
}

</script>


<style lang="less" scoped>
.page-content-header{
  padding: 42px 24px 16px 60px;
}
.title {
      display: block;
      float: left;
      margin-bottom: 0;
      padding-right: 12px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      font-size: 24px;
      line-height: 32px;
    }
.container {
  display: flex;
  height: 100%;
  padding-top: 120px;
  flex-direction: column;
  align-items: center;
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }
}
.ant-dropdown-link{
    margin-top: 18px;
    margin-left: 60px;
    font-size: 18px;
    color: black;
}
.ant-dropdown{
  background-color: blue;
  height: 20px;
}
.form-item-style{
    font-weight: bold;
    font-size: 16px;
}
</style>
